<template>
  <div class="py-40 view-content-box">
    <div class="car-list px-20">
      <div class="card">
        <div>所有顾客</div>
        <div>{{ detail?.totalNum || 0 }}</div>
      </div>
      <!-- <div class="card">
        <div>今日返店</div>
        <div>{{ detail?.todayReturnNum || 0 }}</div>
      </div>
      <div class="card">
        <div>超30天未返店</div>
        <div>{{ detail?.exceed30NotReturnNum || 0 }}</div>
      </div> -->
    </div>
    <div class="d-flex a-center mb-16 px-16">
      <!-- <van-icon name="arrow-left" class="rt-icon" /> -->
      <van-search
        v-model="pageOption.nickname"
        show-action
        placeholder="搜索"
        @search="onSearch"
        @clear="clear"
      >
        <template #action>
          <div @click="onSearch">搜索</div>
        </template>
      </van-search>
    </div>
    <div class="list-head">
      <div>头像</div>
      <div>昵称</div>

      <div>
        <div>到店率</div>
        <van-icon
          name="arrow-down"
          @click="changeSort('exceed30ReturnNumSort', 1)"
          v-if="pageOption.exceed30ReturnNumSort == 0"
        />
        <van-icon
          name="arrow-up"
          @click="changeSort('exceed30ReturnNumSort', 0)"
          v-if="pageOption.exceed30ReturnNumSort == 1"
        />
      </div>
      <div>最近到店</div>
    </div>

    <LoadList
      ref="loadListRef"
      :loadingData="postCustomerPage"
      :query-params="pageOption"
      class="view-content"
      @ok="finishList"
    >
      <!-- v-if="bookList?.length" -->
      <template #list="{ list }">
        <div class="list-box" v-if="list?.length">
          <div
            v-for="(item, index) in list"
            :key="item.id || index"
            class="d-flex list-item"
            @click="toDetail(item.id)"
          >
            <img :src="item.avatar" alt="" />
            <div>{{ item.nickname }}</div>
            <!-- <div>{{ item.sex == 0 ? "女" : item.sex == 1 ? "男" : "未知" }}</div> -->
            <div>{{ item.exceed30ReturnNum }}</div>
            <div>{{ moment(item.createTime).format("YYYY-MM-DD") }}</div>
          </div>
        </div>
      </template>
    </LoadList>

    <!-- <van-empty v-else description="暂无数据" /> -->

    <!-- <van-pagination
      v-if="pageOption.total > pageOption.size"
      v-model="pageOption.current"
      :total-items="pageOption.total"
      :show-page-size="3"
      @change="changeList"
      force-ellipses
    >
      <template #prev-text>
        <div class="left-icon-box">
          <van-icon name="arrow-left" />
        </div>
      </template>
      <template #next-text>
        <div class="right-icon-box">
          <van-icon name="arrow" />
        </div>
      </template>
    </van-pagination> -->

    <!-- <div class="px-20">
      <div class="title">近期新增客户</div>
      <div class="custom-list">
        <img
          :src="item.avatar"
          alt=""
          v-for="(item, index) in addList"
          :key="index"
          @click="toDetail(item.id)"
        />
      </div>
    </div>
    <div class="px-20">
      <div class="title">近期返店</div>
      <div class="custom-list">
        <img
          :src="item.avatar"
          alt=""
          v-for="(item, index) in rtList"
          :key="index"
          @click="toDetail(item.id)"
        />
      </div>
    </div> -->
  </div>
</template>

<script setup>
import {
  postCustomerPage,
  postCustomerStatistics,
  postCusRecentAddPage,
  postCusRecentRePage,
} from "@/api";
import { onMounted, reactive } from "vue";
import moment from "moment";
const router = useRouter();
const detail = ref({});
onMounted(() => {
  // getList();
  getStatitics();
  getOtherList();
});
const list = ref([]);
const pageOption = reactive({
  nickname: "",
  // current: 1,
  // size: 5,
  exceed30ReturnNumSort: 0,
  sexSort: 0,
  total: 0,
});
const getList = () => {
  const { nickname, current, size, exceed30ReturnNumSort, sexSort } =
    pageOption;
  postCustomerPage({
    nickname,
    current,
    size,
    exceed30ReturnNumSort,
    sexSort,
  }).then((res) => {
    list.value = res.data?.records || [];
    pageOption.total = res.data?.total;
    // pageOption.total = 111;
  });
};
const getStatitics = () => {
  postCustomerStatistics().then((res) => {
    detail.value = res.data;
  });
};

const addList = ref([]);
const rtList = ref([]);
const getOtherList = () => {
  postCusRecentAddPage({
    current: 1,
    size: 100,
  }).then((res) => {
    addList.value = res.data?.records;
  });
  postCusRecentRePage({
    current: 1,
    size: 100,
  }).then((res) => {
    rtList.value = res.data?.records;
  });
};
const changeList = (val1, val2) => {
  console.log("val1", val1);
  console.log("val2", val2);
  getList();
};

const changeSort = (key, val) => {
  pageOption[key] = val;
  getList();
};
const toDetail = (id) => {
  router.push({
    path: "/customer/detail",
    query: {
      id,
    },
  });
};
const onSearch = () => {
  console.log("搜索接口");
  getList();
};
const clear = () => {
  pageOption.nickname = "";
  onSearch();
};
</script>

<style lang="less" scoped>
.van-pagination {
  // background: red;
}
:deep(.van-pagination__items) {
  justify-content: center;
  gap: 10px;
}
:deep(.van-pagination__item) {
  flex: none;
  background-color: #fedc00;
  color: #fff;
  min-width: auto;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  border-radius: 50%;
  button {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 50px;
    font-size: 24px;
  }
  .left-icon-box,
  .right-icon-box {
    font-size: 24px;
  }
}

.car-list {
  display: flex;
  gap: 20px;
  margin-bottom: 24px;
  .card {
    flex: 1;
    border-radius: 15px;
    padding: 24px;
    background: #fedc00;
    display: flex;
    flex-direction: column;
    align-items: center;
    // justify-content: ;
    > div {
      &:first-child {
        font-size: 28px;
        margin-bottom: 16px;
      }
      &:last-child {
        font-size: 45px;
        font-weight: 600;
      }
    }
  }
}
.rt-icon {
  margin-right: 12px;
  font-size: 36px;
  margin-left: 24px;
}
:deep(.van-search) {
  flex: 1;
  background: transparent;
  padding: 0;
  // margin-bottom: 10px;
  .van-search__content {
    background: #fff;
  }
}
.list-head {
  display: grid;
  grid-template-columns: 80px 1.5fr 1.5fr 1.5fr;
  padding: 0 26px;
  background: #fff;
  > div {
    flex: 1;
    font-size: 28px;
    padding: 20px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
  }
}
.list-box {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.list-item {
  display: grid;
  grid-template-columns: 80px 1.5fr 1.5fr 1.5fr;
  font-size: 26px;
  background: #fff;
  padding: 10px;
  > * {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #ccc;
  }
}

.page-item {
  width: 50px;
  height: 50px;
  background: #fedc00;
  border-radius: 50%;
  font-size: 28px;
  text-align: center;
  line-height: 50px;
}
.title {
  font-size: 30px;
  // margin-bottom: 24px;
}
.custom-list {
  // display: flex;
  gap: 24px;
  overflow: auto;
  padding: 24px 0;
  border-bottom: 1px solid #ececec;
  white-space: nowrap;
  img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #ccc;
    &:not(:last-child) {
      margin-right: 24px;
    }
  }
}
</style>
